<template>
  <div class="commonBox bx">
    <div class="commonBoxNavBox bx">
      <ul class="commonBoxNav br mb14">
        <li v-for="(item,index) in msgData" :class="{active:index==navActiveStutas}">
          <router-link :to="item.path">{{item.name}}</router-link>
        </li>
      </ul>

    </div>
    <router-view v-on:pageName='changeNavActiveStutas'></router-view>

  </div>
</template>

<script>
  export default {
    name: 'systemSet',
    data() {
      return {
        msgData: [ {
          name: '基本设置',
          path: '/systemSet/basicSetup'
        }, 
        // {
        //   name: '服务器设置',
        //   path: '/systemSet/serverSetup'
        // }
      ],
        navActiveStutas: 0
      }
    },
    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      })

    },
    methods: {
      changeNavActiveStutas: function (data) {
        switch (data) {
          case 'basicSetup':
            this.navActiveStutas = 0;
            break;
            case 'serverSetup':
            this.navActiveStutas = 1;
            break;
        }
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
